<template>
  <div v-if="!hasTelInfo">
    <div v-if="showBtn" class="div-pop" catchtouchmove="true">
      <div class="get-user-info">
        <div v-if="showBackBtn" class="top-nav" :style="'height: '+ spaceBarHeight + 'px; padding-top: '+ statusBarTop + 'px;'">
          <div class="flex-center v-align-c">
            <span class="self-back" @click="backPage"></span>
            <label class="top-txt">{{ appInfo.appName }}</label>
          </div>
        </div>
        <div class="align-c pad-l-30 pad-r-30 mar-l-15 mar-r-15">
          <div class="text-align-c phone-info" :class="!pageType ? 'other-page' : ''" :style="{marginTop: showBackBtn ? '200rpx' : '100rpx'}">
            <div class="flex-center v-align-c height-96">
              <img v-if="customerInfo.avatar" class="width-96 height-96 avatar-bar" :src="customerInfo.avatar"/>
            </div>
            <div class="font-18 font-w mar-t-13">{{ customerInfo.nickname }}</div>
            <div class="font-15 font-color-9 mar-t-30 pad-t-16 mar-b-21">
              <div>为保障陛下您的购物体验</div>
              <div>请授权一下手机号~</div>
            </div>
          </div>
          <div class='mar-t-20 width-per-100'>
            <button size="default"
              class="primary-button font-17 font-w" lang="zh_CN" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
              授权微信手机号
            </button>
            <div class="font-12 font-color-9 text-align-c agree-bar">
              登录表示您已同意
              <span class="pad-t-9 pad-b-9" @click="$pt.navigateTo({url: '/pages/home/agree-user/main'})">《用户协议》</span>
              和<span class="pad-t-9 pad-b-9" @click="$pt.navigateTo({url: '/pages/home/agree-privacy/main'})">《隐私协议》</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { decrypt } from '@/api/wechat'
  import { setPhone } from '@/utils/auth'
  import { getMemberInfo } from '@/api/home'
  import { checkLogin } from '@/api/login'

  export default {
    data() {
      return {
        isComponents: true,
        userInfo: {},
        hasTelInfo: false,
        showBtn: false,
        statusBarHeight: 0,
        spaceBarHeight: 0,
        statusBarTop: 0,
        personalTop: 0,
        appInfo: {},
        customerInfo: {}
      }
    },
    props: {
      pageType: {
        type: String,
        default: ''
      },
      showBackBtn: {
        type: Boolean,
        default: false
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      // 店铺信息栏
      this.statusBarTop = this.statusBarHeight - 38
      this.personalTop = this.statusBarHeight - 41
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') === -1) {
        this.statusBarTop = this.statusBarHeight - 37
        this.personalTop = this.statusBarHeight - 38
      }
      this.appInfo = this.$pt.getStorageSync('appInfo')
    },
    onShow() {
      this.initEls()
    },
    mounted() {
      setTimeout(() => {
        this.initEls()
      }, 100)
    },
    methods: {
      initEls() {
        this.hasTelInfo = false
        if (!this.getPhone) {
          setTimeout(() => {
            if (!this.getCustomerId) {
              checkLogin(this.getMemberId)
              return
            }
            this.showBtn = true
            getMemberInfo(this.getCustomerId).then((response) => {
              if (response.isError) return
              this.customerInfo = response.data
            }).catch(() => {
            })
          }, 300)
        } else {
          this.hasTelInfo = true
          this.showBtn = false
        }
      },
      backPage() {
        this.$emit('showPage')
      },
      getPhoneNumber(e) {
        if (e) {
          if (e.mp.detail.encryptedData) {
            // 保存电话号码
            decrypt({
              memberId: this.getCustomerId,
              encryptedData: e.mp.detail.encryptedData,
              iv: e.mp.detail.iv,
              type: 1
            }).then((res) => {
              if (res.isError) return
              if (res.data.phone) {
                setPhone(res.data.phone)
                this.hasTelInfo = true
                this.$emit('updatePhoneInfo')
                this.$emit('showPage')
              }
            }).catch(() => {
            })
          } else {
            this.$pt.showModal({
              title: '温馨提示',
              content: '该appId没有权限，请前往微信认证',
              success: res => {
              }
            })
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .div-pop{
    z-index: 1200;
  }
  .get-user-info {
    width: 375px;
    height: calc(100vh);
    background-color: #fff;
    overflow: hidden;
    .phone-info{
      // margin-top: 135px;
      &.other-page{
        margin-top: 75px;
      }
    }
    .avatar-bar{
      border-radius: 100px;
    }
    .primary-button{
      background: #ffe100;
      border-radius: 50px;
      margin-top: 30px;
      padding: 1px 0;
    }
    .agree-bar{
      span{
        display: inline-block;
        color: #5876B3;
      }
    }
    .top-nav{
      background: #ffffff;
      color: #333;
      box-sizing: border-box;
      text-align: center;
      font-size: 15px;
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 100;
      .top-txt{
        font-size: 18px;
        color: #333;
      }
      .self-back {
        width: 20rpx;
        height: 20rpx;
        border-top: 2px solid #000;
        border-left: 2px solid #000;
        transform: rotate(-45deg);
        position: absolute;
        left: 20rpx;
        top: 70rpx;
      }
    }
  }
</style>
